<!--
 * @Author: seagull 3132177523@qq.com
 * @Date: 2023-12-02 22:16:12
 * @LastEditors: seagull 3132177523@qq.com
 * @LastEditTime: 2023-12-05 01:31:17
 * @FilePath: \culture-applet\src\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script>
Page({
  data: {
    // tab选项
    tabList: [
      { title: '装备', index: '0' },
      { title: '运动', index: '1' },
      { title: '功能', index: '2' },
    ],
    tabsId: 0, //默认选型为装备
  },
  // 滑动时触发的事件
  slideOn(e) {
    // 拿到当前索引并动态改变
    this.setData({
      tabsId: e.detail.current,
    })
  },

  //点击tab时触发
  tabsOn(e) {
    this.setData({
      //拿到当前索引并动态改变
      tabsId: e.currentTarget.dataset.idx,
    })
  },
})
export default {
  components: {},
  data() {
    return {
      cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
      extraIcon: {
        color: '#4cd964',
        size: '22',
        type: 'gear-filled',
      },
    }
  },
  methods: {
    onClick(e) {
      console.log(e)
    },
    actionsClick(text) {
      uni.showToast({
        title: text,
        icon: 'none',
      })
    },
    // 搜索框
    search(res) {
      uni.showToast({
        title: '搜索：' + res.value,
        icon: 'none',
      })
    },
  },
}
</script>
<template>
  <view class="title">非遗地带</view>
  <view class="tabBox">
    <!-- Tab布局 -->
    <view class="navBox">
      <view class="titleBox">发现</view>
      <view class="titleBox" style="background: url(./../../static/images/chu.png)"></view>
    </view>
    <!-- 内容布局 -->
    <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
      <!-- circular 启用循环滑动 -->
      <swiper-item>
        <view>
          <uni-section>
            <uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
          </uni-section>
          <uni-section title="卡片封面图+操作栏" type="line">
            <uni-card :cover="cover" :is-shadow="true" @click="onClick">
              <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
              <text class="uni-body"
                >这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text
              >
            </uni-card>

            <uni-card :cover="cover" :is-shadow="true" @click="onClick">
              <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
              <text class="uni-body"
                >这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text
              >
            </uni-card>

            <uni-card :cover="cover" :is-shadow="true" @click="onClick">
              <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
              <text class="uni-body"
                >这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text
              >
            </uni-card>

            <uni-card :cover="cover" :is-shadow="true" @click="onClick">
              <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
              <text class="uni-body"
                >这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text
              >
            </uni-card>
          </uni-section>
        </view>
      </swiper-item>
      <swiper-item>
        <view>功能内容</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
/* 非遗地带 */
.title {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: red;
}
/* 搜索框
  */
.search-result {
  padding-top: 10px;
  padding-bottom: 20px;
  text-align: center;
}

.search-result-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 0px;
}

.uni-mt-10 {
  margin-top: 10px;
}
/* 卡片 */

/* 滑动 */
.tabBox {
  padding: 15px;
}

.navBox {
  /* tab整体样式 */
  height: 74px;
  display: flex;
  padding: 1.5% 1.5%;
  background: #e5eefd;
}

.fontColorBox,
.titleBox {
  /* 共同样式 */
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fontColorBox {
  /* 选中tab样式 */
  color: #fff;
  font-weight: bold;
  background: linear-gradient(151deg, #2f7efc 0%, #7badfc 100%);
  border-radius: 50rpx;
}

.titleBox {
  /* 未选中tab样式 */
  color: #1a1a1a;
  font-size: 30px;
  font-family: ‘SimSun’;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50rpx;
}

.swiperTtemBox {
  /* 内容样式 */
  padding: 16rpx;
  font-size: 28rpx;
  height: calc(100vh - 150rpx);
}
</style>
